<template>
    <div class="customUpload">
        <template v-if="multiple">
            <div v-for="(item, index) in imageList" :key="index">
                <div class="uploadedImgWrapper multipleWrapper">
                    <AImage @click.stop :src="`${baseUrl}${item}`" width="14" height="14" />
                    <LeftOutlined @click="transformToLeft(index)" v-if="index !== 0" class="leftIcon" />
                    <EyeOutlined @click.stop class="eyeIcon" />
                    <RightOutlined @click="transformToRight(index)" v-if="index !== imageList.length - 1" class="rightIcon" />
                    <div class="shadowCover" />
                    <img :src="`${baseUrl}${item}`" alt="image" />
                    <div class="closeIconWrapper" @click="deleteImage(index)">
                        <CloseOutlined style="font-size: 12px; color: rgb(71, 71, 71)" />
                    </div>
                </div>
                <div class="imageListSlot">
                    <slot name="imageList" :image="item" :index="index" />
                </div>
            </div>
        </template>

        <AUpload
            name="file"
            class="avatar-uploader"
            list-type="picture-card"
            :show-upload-list="false"
            :action="uploadPath"
            :withCredentials="true"
            @change="handleChange"
            :multiple="multiple"
            accept="image/gif, image/png, image/jpeg, image/bmp, image/webp, image/x-icon, image/vnd.microsoft.icon"
        >
            <template v-if="!multiple">
                <div v-if="innerImage" class="uploadedImgWrapper">
                    <AImage @click.stop :src="`${baseUrl}${innerImage}`" width="14" height="14" />
                    <EyeOutlined @click.stop class="eyeIcon" />
                    <div class="shadowCover" />
                    <img :src="`${baseUrl}${innerImage}`" alt="image" />
                </div>

                <div v-else>
                    <PlusOutlined></PlusOutlined>
                    <div class="ant-upload-text">Upload</div>
                </div>
            </template>
            <template v-else>
                <div>
                    <PlusOutlined></PlusOutlined>
                    <div class="ant-upload-text">Upload</div>
                </div>
            </template>
        </AUpload>
    </div>
</template>

<script>
export default defineComponent({});
</script>

<script setup>
import { PlusOutlined, EyeOutlined, CloseOutlined, LeftOutlined, RightOutlined } from "@ant-design/icons-vue";
import { reactive, ref } from "@vue/reactivity";
import { computed, defineComponent, watch } from "@vue/runtime-core";
import { message } from "ant-design-vue";
import { useRouter } from "vue-router";
const uploadPath = process.env.VUE_APP_UPLOAD;
const baseUrl = process.env.VUE_APP_BASEURL;
const router = useRouter();
const props = defineProps({
    image: {
        type: String,
        default: "",
    },
    imageList: {
        type: Array,
        default: [],
    },
    multiple: {
        type: Boolean,
        default: false,
    },
});
const emit = defineEmits(["update:image", "update:imageList"]);
const innerImage = computed({
    get: () => props.image,
    set: val => emit("update:image", val),
});
const innerImageList = computed({
    get: () => props.imageList,
    set: val => emit("update:imageList", val),
});
const handleChange = info => {
    const file = info.file;
    if (file.status === "done") {
        if (file.response.code === 200) {
            innerImage.value = file.response.data;
            if (props.multiple) {
                innerImageList.value = [...innerImageList.value, file.response.data];
            }
            message.success("上传成功");
        } else if (file.response.code === 401) {
            message.warn("请登录");
            router.replace({ name: "login" });
        } else {
            message.error("上传失败");
        }
    }
    if (file.status === "error") {
        message.error("上传失败");
    }
};
const deleteImage = index => {
    innerImageList.value.splice(index, 1);
};
const transformToLeft = index => {
    const current = innerImageList.value[index];
    innerImageList.value.splice(index, 1);
    innerImageList.value.splice(index - 1, 0, current);
};
const transformToRight = index => {
    const current = innerImageList.value[index];
    innerImageList.value.splice(index, 1);
    innerImageList.value.splice(index + 1, 0, current);
};
</script>

<style scoped lang="scss">
.customUpload {
    display: flex;
    :deep .avatar-uploader > .ant-upload {
        width: 128px;
        height: 128px;
        overflow: hidden;
    }
    .uploadedImgWrapper {
        width: 128px;
        height: 128px;
        position: relative;
        flex-shrink: 0;
        &:hover {
            .leftIcon,
            .rightIcon,
            .eyeIcon {
                color: white;
            }
        }
        &:hover {
            .shadowCover {
                display: block;
            }
        }
        :deep .ant-image {
            width: 14px;
            height: 14px;
            opacity: 0;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 4;
            cursor: pointer;
        }
        .leftIcon,
        .rightIcon {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            z-index: 3;
            color: rgb(194, 194, 194);
            cursor: pointer;
        }
        .leftIcon {
            left: 24%;
        }
        .rightIcon {
            right: 24%;
        }
        .eyeIcon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            color: rgb(194, 194, 194);
        }

        .shadowCover {
            display: none;
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
            background-color: rgba($color: #000000, $alpha: 0.2);
        }
        img {
            width: 128px;
            height: 128px;
            object-fit: contain;
            position: relative;
            z-index: 1;
        }
    }
    .multipleWrapper {
        border: 1px dashed #d9d9d9;
        margin-right: 8px;
        img {
            width: 126px;
            height: 126px;
        }
        .closeIconWrapper {
            display: none;
        }
        &:hover {
            .closeIconWrapper {
                display: block;
                width: 14px;
                height: 14px;
                border: solid rgb(71, 71, 71) 1.5px;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                right: 0;
                top: 0;
                transform: translate(50%, -50%);
                z-index: 2;
                cursor: pointer;
            }
        }
    }
    .imageListSlot {
        width: 128px;
        margin-top: 6px;
    }
    :deep .ant-upload-select-picture-card {
        width: 128px;
        height: 128px;
    }
    :deep .ant-upload-select-picture-card i {
        font-size: 32px;
        color: #999;
    }
    :deep .ant-upload-select-picture-card .ant-upload-text {
        margin-top: 8px;
        color: #666;
    }
}
</style>
